<template>
	<div class="login-body">
    <el-form ref="loginForm" :model="loginForm" :rules="loginRule" class="login-form" auto-complete="on" label-position="left">

      <div class="title-container">
        <h3 class="title" style="margin:auto;text-align:center">ee学车管理系统</h3>
      </div>

      <el-form-item prop="username">
        <span class="svg-container">
          <!-- <svg-icon icon-class="user" /> -->
        </span>
        <el-input
          v-model="loginForm.account"
          placeholder="请输入账号"
          name="account"
          type="text"
          auto-complete="off"
        />
      </el-form-item>

      <el-form-item prop="pwd">
        <span class="svg-container">
          <!-- <svg-icon icon-class="password" /> -->
        </span>
        <el-input
          type="password"
          v-model="loginForm.pwd"
          placeholder="请输入密码"
          name="pwd"
          auto-complete="off"
          @keyup.enter.native="doLogin" />
      </el-form-item>

      <el-form-item prop="code">
          <el-input type="text" v-model="loginForm.code" auto-complete="off" placeholder="验证码"></el-input>
          <img :src="img_src" height=38 width=130 @click.stop="getCodeImage" />
      </el-form-item>

      <el-button type="primary" style="width:100%;margin-bottom:30px;" @click.native.prevent="doLogin">登录</el-button>

      
    </el-form>
			<!-- <el-form class="login-box" :model="loginForm" :rules="loginRule" v-loading="loading" ref="loginForm"  label-position="left" label-width="0px">
               <h3 class="title" >后台管理系统</h3>
				<el-form-item prop="account">
				   <el-input type="text" v-model="loginForm.account" auto-complete="off" placeholder="账号"></el-input>
				</el-form-item>
				<el-form-item prop="pwd">
				   <el-input type="password" v-model="loginForm.pwd" auto-complete="off" placeholder="密码"></el-input>
				</el-form-item>
				<el-form-item prop="code">
				   <el-input type="text" v-model="loginForm.code" auto-complete="off" placeholder="验证码"></el-input>
				   <img :src="img_src" height=38 width=130 @click.stop="getCodeImage" />
				</el-form-item>
				<el-form-item style="width:100%;">
				  <el-button type="primary" style="width:100%;" @click.native.prevent="doLogin" >登录</el-button>
				</el-form-item>
          </el-form> -->
	</div>
</template>

<script>
import * as api from '../api/index'
import {menuRoute} from '../lib/function'
  export default {
    data() {
      return {
		    img_src:'',
        loading: false,
        loginForm: {
          account:'15012345678',
          pwd:'123456',
		      code:'',
        },
        loginRule: {
          account: [
            { required: true, message: '请输入账号', trigger: 'blur' }
          ],
          pwd: [
            { required: true, message: '请输入密码', trigger: 'blur' }
          ],
				  code: [
		            { required: true, message: '请输入验证码', trigger: 'blur' }
		          ]
          }
      }
    },
    methods: {
      doLogin() {
        this.$refs.loginForm.validate((valid) => {
          if(valid) {
						  this.loading = true;
						  api.login(this.loginForm,res=>{//登录
							    if(res.status==1){
											sessionStorage.setItem('user',JSON.stringify(res.data));
											this.getMenu();
								 }else{
											this.$message(res);
										  this.getCodeImage();
											this.loading = false;
								 }
						    });
          } else {
            return false;
          }
        });
      },
			getCodeImage(){
				api.getCodeImage({r:Math.random()},res=>{
					 if(res.status==1) this.img_src=res.data;
				});
			},
	  getMenu(){
			let menu=sessionStorage.getItem('menu');
			if(menu){
				this.$router.replace('/');//路由跳转
			}else{
				api.getMenu({},res=>{
					if(res.status==1){
						sessionStorage.setItem('menu',JSON.stringify(res.data));
						this.$router.addRoutes([menuRoute(res.data)]);
						this.$router.replace('/');//路由跳转
					}else {
						sessionStorage.removeItem('user');
						this.$notify(res);
						this.loading = false;
					}
			  });
			}
	  }
    },
		created(){
			this.img_src=this.getCodeImage();
		}
	/*beforeCreate(){
		let logout=sessionStorage.getItem('logout');
		if(logout) {
			sessionStorage.removeItem('logout');
			location.reload();//清空数据
		}
	}*/
  }
</script>
<style scoped>
.title-container {
    position: relative;
    margin-bottom: 20px;
  }
  .title {
      font-size: 26px;
      color: #fff;
      margin: 0px auto 40px auto;
      text-align: center;
      font-weight: bold;
    }
    .set-language {
      color: #fff;
      position: absolute;
      top: 5px;
      right: 0px;
    }
.login-form {
    position: absolute;
    left: 0;
    right: 0;
    width: 520px;
    max-width: 100%;
    padding: 35px 35px 15px 35px;
    margin: 120px auto;
  }
.login-body{
  position:absolute;
  top:0;
  bottom:0;
  left:0;
  right:0;
  width:100%;
  height:100%;
  background:url(../assets/login-bgg.png) no-repeat center;
  background-size:110% 100%;
  }
.login-box{
     position:fixed;
	 width:286px;
	 height:346px;
	 overflow:hidden;
	 left:50%;
	 top:50%;
	 margin-top:-219px;
	 margin-left:-189px;
	 padding:46px;
	background:url(../assets/login-bg.png) no-repeat center;
  }
.login-box h3.title {
	  font-size:24px;color:#fffefe;
	  font-weight:normal;
	  margin-bottom: 40px;
      text-align: center;
      color: #fff;
    }
form img{position:absolute;right:1px;top:1px}
</style>
